<template>
  <h5>Hello Vue3</h5>
  <h5>今年：{{ age }}岁</h5>
  
  <h5>十年后：{{ newAge }}岁</h5>
  <!-- 使用v-model绑定计算属性 -->
  <input type="text" v-model="age" />
</template>

<script>
import { computed, ref } from 'vue'
/* 
  目标：掌握使用computed函数定义计算属性
  应用场景：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
*/
export default {
  setup() {
    const age = ref(18)

    // Vue3 组合式API写法
    // 高级写法：get 和 set
    const newAge = computed({
      // 获取，获取计算属性的值
      get() {
        return Number(age.value) + 10
      },
      // 设置，当你给计算属性设置值的时候触发
      set(val) {
        age.value = val - 10
      },
    })

    return { age, newAge }
  },
}
</script>